<template>
  <div class="dashboardPage">
    <el-collapse v-model="activeName" class="el-collapse">
      <el-collapse-item title="vue2响应式" name="1">
        <input id="ipt1" class="mr-8" type="text" @input="myFunction" />

        <span id="vue2span" class="mr-8"></span>

        <el-popover :width="600" trigger="click">
          <template #reference>
            <el-button type="primary">Code</el-button>
          </template>
          <CodeView />
        </el-popover>
      </el-collapse-item>
      <el-collapse-item title="vue3响应式" name="2">
        <input id="ipt2" class="mr-8" type="text" @input="myFunction2" />

        <span id="vue3span" class="mr-8"></span>

        <el-popover :width="600" trigger="click">
          <template #reference>
            <el-button type="primary">Code</el-button>
          </template>
          <CodeView codeType="v3" />
        </el-popover>
      </el-collapse-item>
      <el-collapse-item title="ref" name="3">
        <el-button @click="addCounter">{{ counter }}</el-button>
        <div>ref：接受一个内部值并返回一个响应式可变的ref对象。ref对象仅有一个.value property，指向该内部值。</div>
      </el-collapse-item>
      <el-collapse-item title="reactive" name="4">
        <el-button @click="changePerson"
          >姓名：{{ person.name }}年龄{{ person.age }}</el-button
        >
        <div>reactive：返回对象的响应式副本（proxy代理的对象）</div>
      </el-collapse-item>
      <el-collapse-item title="toRaw" name="5">
        <el-button @click="changePerson"
          >姓名：{{ toRawPerson.name }}年龄{{ toRawPerson.age }}</el-button
        >
        <div>
          toRaw：返回原生代理对象，当作"逃生舱"，可当作临时读取数据而无需承担其他开销，可以用于更改数据而避免触发更改(toRaw获取的原始数据改变，原数据也会跟着变化，dom不更新)
        </div>
      </el-collapse-item>
      <el-collapse-item title="toRefs" name="6">
        <el-button @click="changePerson"
          >姓名：{{ name }}年龄{{ age }}</el-button
        >
        <div>toRefs: 可以用来为源响应式对象上的某个property</div>
      </el-collapse-item>
    </el-collapse>
    <ComTest :person="person"/>
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive, toRaw, toRef, toRefs } from "vue";
import CodeView from "@/components/codeShow/Index.vue";
import { myFunction, myFunction2 } from "@/constant/example";
import ComTest from './comTest.vue'
/*************************************************************************************/
export default defineComponent({
  components: {
    CodeView, ComTest
  },
  setup() {
    const activeName = ref(['1', '2', '3', '4', '5', '6']);

    // todo something
    const counter = ref(0);

    const addCounter = () => {
      counter.value++;
    };

    const person = reactive({
      age: 18,
      name: "jj",
    });

    const toRawPerson = toRaw(person);

    const changePerson = () => {
      person.age++;
      console.log(person);
    };
    return {
      activeName,
      counter,
      addCounter,
      person,
      toRawPerson,
      ...toRefs(person),
      changePerson,
      myFunction,
      myFunction2,
    };
  },
});
</script>
<style lang='scss' scoped>
.dashboardPage {
  .el-collapse {
    padding: 24px;
    border: 1px solid #ebeef5;
    background: #fff;
  }
}
</style>